<!DOCTYPE html>
<html>
	<head>
		<title>Argus: hijacking as path</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta charset="utf-8">
		
		<style>
		html, body, #map_canvas {
			font-size: 20pt;
			height: 100%;
			margin: 0px;
			padding: 0px
		}
		.customBox {
			font-size: 14pt;
			width: 300px;
			height: 300px;
			border-style: ridge;
			border-width: 6px;
			border-color: red;
			background-color: #A2C1EE;
			position: absolute
		}

		</style>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=uVMIC3EBblCElaQyzEcAmnO3"></script>
	<script src="/static/textoverlay-baidu.js"></script>
	<style type="text/css">
    .labels {
      color: black;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      white-space: nowrap;
    }
    .alerts {
      color: red;
      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 60px;     
      white-space: nowrap;
    }
    .prefix {
      color: green;
      text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
      background-color: transparent;
      font-family: "Lucida Grande", "Arial", sans-serif;
      font-size: 10px;
      font-weight: bold;
      text-align: center;
      width: 200px;     
      white-space: nowrap;
    }
	</style>
	<script type="text/javascript">


  function initializemap() {
	var info;
	var np=0;
	var nup=0;
	var time_dec="";
	var pfx_dec="";
	var badseg_dec = "为";

	var zoomlevel = 3;
	if (screen.height > 2000){
		zoomlevel = 5;
	}
	else if (screen.height > 1000) {
		zoomlevel = 4;
	}

	map = new BMap.Map(document.getElementById("map_canvas")); 
	map.centerAndZoom(new BMap.Point(5, 15), zoomlevel);
	map.addControl(new BMap.MapTypeControl());
	map.setCurrentCity("北京");  
	control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
	navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT});//左上角，添加默认缩放平移控件
	map.addControl(control);        
	map.addControl(navigation);  


	//bad path segment
	var path = [];
	var i=0;
	{% for point in badpathsegment %}
		path.push(new BMap.Point({{point.longi}}, {{point.lat}}));
		badseg_dec = badseg_dec + "<a style=\"color:red\" href=\"http://bgp.he.net/AS{{point.asn}}#_whois\" target=\"_blank\">AS{{point.asn}}</a> ";
		i++;
	{% endfor %}
	if(i>1) {
		badseg_dec="路径"+badseg_dec;
	}
	var redimage = new BMap.Icon("/static/red_circle.png", new BMap.Size(26,26), {anchor: new BMap.Size(13,13), imageSize: new BMap.Size(26,26)});

	{% for point in badpoints %}
		var latLng = new BMap.Point({{point.longi}} + Math.random() * 0.2 - 0.1, {{point.lat}} + Math.random() * 0.2 - 0.1);
		var title = "AS ".concat({{point.title}});
		var marker = new BMap.Marker(latLng, {icon:redimage}); // 创建点
		map.addOverlay(marker);
		marker.enableDragging();
		var label = new BMap.Label(title, {offset:new BMap.Size(-20,30)});
		label.setStyle({
		      color: "red",
		      textShadow: "-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white",
		      backgroundColor: "transparent",
		      fontSize: "10px",
		      fontWeight: "bold",
		      textAlign: "center",
		      width: "60px",
		      border: "none",
		      whiteSpace: "nowrap"
		});
		marker.setLabel(label);

	{% endfor %}

	{% if pfxpoint %}
		time_dec = "{{time}}";
		var pfx;
		if({{pfxpoint.prefix_AS}}==0) {
			pfx = "{{pfxpoint.prefix_dec}}";
			pfx_dec = "前缀<span style=\"color:red\">{{pfxpoint.prefix_dec}}</span>被劫持</li>";
		}
		else {
			pfx = "{{pfxpoint.prefix_dec}} @ AS {{pfxpoint.prefix_AS}}";
			pfx_dec = "前缀<span style=\"color:red\">{{pfxpoint.prefix_dec}}</span>被劫持</li><li>该前缀原属于<a style=\"color:red\" href=\"http://bgp.he.net/AS{{pfxpoint.prefix_AS}}#_whois\" target=\"_blank\">AS{{pfxpoint.prefix_AS}}</a></li>";
		}

	        var greendot = new BMap.Icon("/static/green-dot.png", new BMap.Size(36,36), {anchor: new BMap.Size(18, 36), imageSize: new BMap.Size(36,36)});
		var marker = new BMap.Marker(new BMap.Point({{pfxpoint.longi}}, {{pfxpoint.lat}}), {icon:greendot}); // 创建点
		map.addOverlay(marker);
		marker.enableDragging();
		var label = new BMap.Label(pfx, {offset:new BMap.Size(-80,-20)});
		label.setStyle({
		      color: "green",
		      textShadow: "-1px 0 white, 0 1px white, 1px 0 white, 0 -1px white",
		      backgroundColor: "transparent",
		      fontSize: "10px",
		      fontWeight: "bold",
		      textAlign: "center",
		      width: "240px",
		      border: "none",
		      whiteSpace: "nowrap"
		});
		marker.setLabel(label);
	{% endif %}

	var polyline = new BMap.Polyline(path, {strokeColor: "red", strokeOpacity: 1.0, strokeWeight: 2});
	map.addOverlay(polyline);  
	
        var purplebulb = new BMap.Icon("/static/purple-bulb.png", new BMap.Size(32,32), {anchor: new BMap.Size(16, 32), imageSize: new BMap.Size(32,32)});
        {% for point in pollutedList %}
                var latLng = new BMap.Point({{point.longi}} + Math.random() * 4 -2, {{point.lat}} + Math.random() * 4 - 2);
                var titleAS = "Monitor ".concat({{point.eye_id}}).concat("@AS ").concat({{point.asn}});
                var title = "Monitor ".concat({{point.eye_id}});
		var marker1 = new BMap.Marker(latLng, {icon:purplebulb, title:titleAS}); // 创建点
		map.addOverlay(marker1);
		marker1.enableDragging();
		np=np+1;
        {% endfor %}
        var latLng = new BMap.Point(116.320555, 40.007883);
	var titleAS = "Monitor 0@AS4538";
	var marker1 = new BMap.Marker(latLng, {icon:purplebulb, title:titleAS}); // 创建点
	map.addOverlay(marker1);
	marker1.enableDragging();
	np=np+1;
	

        {% for point in unpollutedList %}
		nup=nup+1;
        {% endfor %}
	
	nm=np+nup;
	nmp=Math.round(np*100/nm);

	//info="";
	info="<ul><li><span style=\"color:red\">" + time_dec + "</span>发现" + pfx_dec + "<li>异常AS" + badseg_dec + "</li><li>共使用了<span style=\"color:red\">" + nm + "</span>个监测点，其中<span style=\"color:red\">" + np + "</span>个监测点受到影响</li><li>估测约<span style=\"color:red\">" + nmp + "%</span>的互联网受到影响</li></ul>";

	//use TxtOverlay
	customText="<div style=\"font-weight:bold\"><table width=100%><tr><td style=\"font-size:16pt;text-align:center\">前缀劫持事件信息</td></tr><tr><td id=\"num_points\">" + info +"</td></tr><tr><td style=\"text-align:center\"><a href=\"/fingerprints/{{pfxpoint.aid}}/\"  target=\"_blank\">劫持详细信息</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a href=\"/alarms/\"  target=\"_blank\"> 更多劫持事件</a></td></tr></table></div>";
	txt = new TxtOverlaybd(new BMap.Point(-130, -10),customText,"customBox");
	map.addOverlay(txt);
  }
</script>
</head>
<body onload="initializemap()">
  <div id="map_canvas"></div>
</body>
</html>
